<template>
	<view class="option pages">
		<view class="options" v-for="item in list" :key="item.id" @tap="open(item)">
			<view class="options_name">
				{{item.name}}
			</view>
			<view class="options_forward" v-show="lang==item.id">
				<uni-icons type="checkmarkempty" size="20" color="#bebecc"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					// 	{
					// 	id: 'zh-cn',
					// 	name: this.$t('option.language.Chinese')
					// }, {
					// 	id: 'ft',
					// 	name: this.$t('option.language.fChinese')
					// }, 
					{
						id: 'en',
						name: this.$t('option.language.English')
					},
					{
						id: 'sp',
						name: this.$t('option.language.Sp')
					}
				],
				lang: 'zh-cn'
			}
		},
		onShow() {
			this.lang = 'zh-cn'
			// this.lang = uni.getStorageSync('lang') || 'sp'
			uni.setNavigationBarTitle({
				title: this.$t('list.Change')
			})
		},
		methods: {
			open(item) {
				this.lang = item.id
				this._i18n.locale = item.id
				uni.setStorageSync('lang', item.id)
				uni.redirectTo({
					url: '/pages/shop/mine/mine'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.option {
		width: 100%;
		height: 100vh;
		background: #f5f5f9;

		.options {
			width: 100%;
			height: 120rpx;
			padding: 0 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #fff;
			border-top: 2rpx solid #f5f5f9;

			.options_name {
				font-size: 28rpx;
				font-weight: 600;
			}

			&.options:first-child {
				border-top: 2rpx solid transparent;
			}
		}
	}
</style>